<template>
  <Dialog v-model="show" @close="close" :title="$t('articleManage.查看文章')" width="1200px">
    <div class="content">
      <div class="text-center fs-20 fw-bold mb20">
        {{ props.data["title" + locale] }}
      </div>
      <div v-html="props.data['content' + locale]"></div>
    </div>
  </Dialog>
</template>
<script setup>
import { ref, watch, reactive } from "vue";
import Dialog from "@/components/dialog.vue";
import { useI18n } from "vue-i18n";

const { locale, t } = useI18n();
const show = defineModel();
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});

const close = () => {
  show.value = false;
};
</script>
<style lang="scss" scoped>
.content {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  border: 1px solid #e5e5e5;
  max-height: 500px;
  overflow-y: auto;

  img {
    max-width: 100%;
    height: auto;
  }
}
</style>
